<template>

    <el-main>
    <el-card>
        <template #header>
            <div class="card-header">
                <span>课程列表</span>
            </div>
        </template>
            <div style="height:300px;text-align:center;">
                
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="xuhao" label="序号" width="100" />
                    <el-table-column prop="crouse" label="课程名称" width="120" />
                    <el-table-column prop="data" label="创建时间" width="150" />
                    <!-- 可见状态 -->
                    <el-table-column prop="address" label="操作" />
                </el-table>
                
            </div>
    </el-card>
    </el-main>
</template>

<script>
export default {
        data(){
            return{ 
                tableData:[
                {
                    xuhao:'1',
                    crouse: 'Java程序设计',
                    data: '2020-12-12',
                    address: '111',
                },
                {
                    xuhao:'2',
                    crouse: 'MySQL数据库技术',
                    data: '2021-12-11',
                    address: '111',
                },
                {
                    xuhao:'3',
                    crouse: 'web前端开发基础',
                    data: '2021-12-11',
                    address: '111',
                },
                {
                    xuhao:'4',
                    crouse: 'web前端开发项目实战',
                    data: '2021-12-11',
                    address: '111',
                },
                ]
            }
        }
        

}
</script>

<style>
.el-main{
    text-align: left;
}
</style>